<template>
  <div ref="div">
    <canvas ref="canvas"></canvas>
    <button @click="restart" v-if="$store.state.restart">开始游戏</button>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity'
import { GameMap } from '../assets/scripts/GameMap'
import { onMounted } from '@vue/runtime-core'
import { useStore } from 'vuex'

export default {
  name: 'GameMap',
  setup () {
    const div = ref(null)
    const canvas = ref(null)
    const store = useStore()
    let gamemap = null 

    onMounted(() => {
      gamemap = new GameMap(canvas.value.getContext('2d'), div.value, store)
    })

    const restart = () => {
      gamemap.restart()
    }

    return {
      div,
      canvas,
      restart
    }
  }
}
</script>

<style lang="scss" scoped>
  div {
    height: 82vh;
    // height: calc(100% - 8vh);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  canvas {
    background-color:#abd752;
    display: flex;
    position: relative;
  }
  button {
    position: absolute;
    background-color: red;
    font-size: 6vh;
    color: white;
    border: none;
    padding: 2vh;
    cursor: pointer;
    border-radius: 5px;
    &:hover {
      opacity: 0.8;
    }
  }
</style>
